<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="/WEB-INF/page-base.tld" prefix="w" %>
<%
    String path = request.getContextPath();
%>
<style>
    .wicon {
        background-image: url(
        "");
        background-repeat: no-repeat;
        background-position: right center;
    }
    .required{
        color: red;
    }
    .Divspan{
        display: inline-block;
    }
    .Deno{
        height: 24px !important;
    }
    .limit{
        padding-left: 139px;
    }
    .clearance{
        line-height: 28px;
        height: 28px;
        background-color: #fff;
        margin-top: 7px;
    }
    .font50{
        color: #505050 !important;
    }
    .mt0{
        margin-top: 0px;
    }
    .pdleft{
        padding: 5px 0 5px 145px
    }
    .ding{
        padding: 5px 0;
    }
    #errormsg {
        position: fixed;
        width: 200px;
        height: 50px;
        line-height: 50px;
        padding: 1px 5px;
        text-align: center;
        background-color: #00A4F2;
        opacity: 0.5;
        color: #fff;
        left: 50%;
        margin-left: -50px;
        top: 50%;
        border-radius: 20px;
        z-index: 100000000;
    }
</style>
<form id="couponform" method="post" action="">
    <div class="headT">
        <span></span>
        <label>优惠劵定义</label>
    </div>
    <div id="errormsg" style="display: none;"></div>
    <div class="ui-formContent">
        <div>
            <label style="width:130px;text-align:right"><font class="required">*</font>推广平台：</label>
            <label class="radioButton">
                <input id="all" name="platform" checked="checked" class="radio-top mt0" type="radio" value="0"/>全平台
            </label>
            <label class="radioButton">
                <input id="pc" name="platform" type="radio" class="radio-top mt0" value="1"/>PC端
            </label>
            <label class="radioButton">
                <input id="wxd" name="platform" type="radio" class="radio-top mt0" value="2"/>微商城
            </label>
        </div>
        <div>
            <label style="width:130px;text-align:right"><font class="required">*</font>优惠劵名称：</label>
            <input style="width:283px"  name="couponname" styleClass="easyui-validatebox" autocomplete="off"/>
        </div>
        <div style="padding: 5px 0;">
            <label style="width:130px;text-align:right"><font class="required">*</font>有效期：</label>
            <div class="Divspan">
                <label class="radioButton">
                    <input  type="radio" name="fixed" checked="checked"   class="radio-top mt0 validity" value="0"/>
                    <span class="font50">固定有效期：</span>
                    <input class="datainp wicon"  id="fixedstarttime" name="fixedstarttime" value="" type="text" placeholder="请选择"
                           readonly> 到
                    <input class="datainp wicon"  id="fixedendtime" name="fixedendtime" value="" type="text" placeholder="请选择">
                </label>
            </div>
            <div class="pdleft" id="aa">
                <label class="radioButton">
                    <input  type="radio"  name="fixed" class="radio-top mt0 validity" value="1"/>
                    <span class="font50">活动有效期：</span>
                    <input type="text" name="activeLife" id="activeLife" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 天
                </label>
            </div>
        </div>
        <div>
            <label style="width:130px;text-align:right"><font class="required">*</font>优惠劵描述：</label>
            <input  style="width:731px" name="couponDescribe"  styleClass="easyui-validatebox"
                   autocomplete="off"/>
        </div>
        <div class="ding">
            <label style="width:130px;text-align:right"><font class="required">*</font>优惠劵面额：</label>
            <input type="text" list="url_list" name="couponDenomination" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
                <datalist id="url_list">
                    <option label="5" value="5" />
                    <option label="10"  value="10" />
                    <option label="20" value="20" />
                    <option label="30" value="30" />
                    <option label="50" value="50" />
                    <option label="100" value="100" />
                </datalist>
            <%--<select class="Deno" name="Deno" id="myse">--%>
                <%--<option>5</option>--%>
                <%--<option>10</option>--%>
                <%--<option>20</option>--%>
                <%--<option>30</option>--%>
                <%--<option>50</option>--%>
                <%--<option>100</option>--%>
                <%--<option>自定义</option>--%>
            <%--</select>--%>
            <%--<input type="text" name="coupDeno" class="coupDeno" style="display: none;" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">--%>
        </div>
    </div>
    <div class="headT">
        <span></span>
        <label>优惠劵限制</label>
    </div>
    <div class="ui-formContent">
        <div class="ding">
            <label style="width:130px;text-align:right">最小订单金额：</label>
            <input type="text" onblur="moneyinput(this)" autocomplete="off">
        </div>
        <div>
            <label style="width:130px;text-align:right">优惠劵总张数：</label>
            <input type="text" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
        </div>
        <div class="clearance"></div>
        <div class="limit">
            <label>
                <input type="checkbox" id="convertible" name="convertible" class="convertible">
                <span>可兑换</span>
            </label>
            <div style="padding-left: 69px;">
                <label><font class="required">*</font>兑换时间：</label>
                <input class="datainp wicon" id="exchangestarttime" name="" value="" type="text" placeholder="请选择" disabled="disabled"
                       > 到
                <input class="datainp wicon" id="exchangeendtime" name="" value="" type="text" placeholder="请选择" disabled="disabled">
            </div>
        </div>
        <div class="clearance"></div>
        <div class="limit">
            <label>
                <input type="checkbox" id="Receive" name="Receive" class="Receive">
                <span>可领取</span>
            </label>
            <div style="padding-left: 69px;">
                <label><font class="required">*</font>领取时间：</label>
                <input class="datainp wicon" id="Receivestrttime" name="" value="" type="text" placeholder="请选择" disabled="disabled"> 到
                <input class="datainp wicon" id="ReceiveEndtime" name="" value="" type="text" placeholder="请选择" disabled="disabled">
            </div>
            <div style="padding-left: 47px;padding-top: 10px;">
                <label>单个客户限领：</label>
                <input type="text" value="1" disabled="disabled" id="collar" oninput="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"> 张
            </div>
        </div>
    </div>
    <div style="width: 100%;  text-align: center;padding: 10px 0;">
        <input type="submit" value="完成"/>
    </div>
</form>
<script>
    /**
     * 固定有效期实现日期选择联动
     * */
    var start = {
        format: 'YYYY-MM-DD hh:mm:ss',//日期格式
        minDate: $.nowDate({DD: 0}), //设定最小日期为当前日期
        maxDate: '2099-06-16 23:59:59', //最大日期
        festival: true,//是否显示节日
        isClaer: true,//是否显示清空
        isinitVal: false,//是否初始化时间
        zIndex: 300000,//层级高度
        choosefun: function (elem, datas) {
            end.minDate = datas; //开始日选好后，重置结束日的最小日期
            endDates();
        },//选中日期回调
        okfun: function (elem, datas) {
            // alert(datas)
        }//点击确定回调
    };
    var end = {
        format: 'YYYY-MM-DD hh:mm:ss',//日期格式
        minDate: $.nowDate({DD: 0}), //设定最小日期为当前日期
        maxDate: '2099-06-16 23:59:59', //最大日期
        festival: true,//是否显示节日
        isClaer: true,//是否显示清空
        isinitVal: false,//是否初始化时间
        zIndex: 300000,//层级高度
        choosefun: function (elem, datas) {
            start.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
        }
    };
    //日期联动
    function endDates() {
        end.trigger = false; //结束日期的事件改成false
        $("#fixedendtime").jeDate(end);
    };
    $("#fixedstarttime").jeDate(start);
    $("#fixedendtime").jeDate(end);


    /**
     * 可兑换实现日期选择联动
     * */
    var startTwo = {
        format: 'YYYY-MM-DD hh:mm:ss',//日期格式
        minDate: $.nowDate({DD: 0}), //设定最小日期为当前日期
        maxDate: '2099-06-16 23:59:59', //最大日期
        festival: true,//是否显示节日
        isClaer: true,//是否显示清空
        isinitVal: false,//是否初始化时间
        zIndex: 300000,//层级高度
        choosefun: function (elem, datas) {
            endTwo.minDate = datas; //开始日选好后，重置结束日的最小日期
            endDatesTwo();
        },//选中日期回调
        okfun: function (elem, datas) {
            // alert(datas)
        }//点击确定回调
    };
    var endTwo = {
        format: 'YYYY-MM-DD hh:mm:ss',//日期格式
        minDate: $.nowDate({DD: 0}), //设定最小日期为当前日期
        maxDate: '2099-06-16 23:59:59', //最大日期
        festival: true,//是否显示节日
        isClaer: true,//是否显示清空
        isinitVal: false,//是否初始化时间
        zIndex: 300000,//层级高度
        choosefun: function (elem, datas) {
            startTwo.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
        }
    };
    //日期联动
    function endDatesTwo() {
        endTwo.trigger = false; //结束日期的事件改成false
        $("#exchangeendtime").jeDate(endTwo);
    };
    $("#exchangestarttime").jeDate(startTwo);
    $("#exchangeendtime").jeDate(endTwo);


    /**
     * 可领取实现日期选择联动
     * */
    var startThree = {
        format: 'YYYY-MM-DD hh:mm:ss',//日期格式
        minDate: $.nowDate({DD: 0}), //设定最小日期为当前日期
        maxDate: '2099-06-16 23:59:59', //最大日期
        festival: true,//是否显示节日
        isClaer: true,//是否显示清空
        isinitVal: false,//是否初始化时间
        zIndex: 300000,//层级高度
        choosefun: function (elem, datas) {
            endThree.minDate = datas; //开始日选好后，重置结束日的最小日期
            endDatesThree();
        },//选中日期回调
        okfun: function (elem, datas) {
            // alert(datas)
        }//点击确定回调
    };
    var endThree = {
        format: 'YYYY-MM-DD hh:mm:ss',//日期格式
        minDate: $.nowDate({DD: 0}), //设定最小日期为当前日期
        maxDate: '2099-06-16 23:59:59', //最大日期
        festival: true,//是否显示节日
        isClaer: true,//是否显示清空
        isinitVal: false,//是否初始化时间
        zIndex: 300000,//层级高度
        choosefun: function (elem, datas) {
            startThree.maxDate = datas; //将结束日的初始值设定为开始日的最大日期
        }
    };
    //日期联动
    function endDatesThree() {
        endThree.trigger = false; //结束日期的事件改成false
        $("#ReceiveEndtime").jeDate(endThree);
    };
    $("#Receivestrttime").jeDate(startThree);
    $("#ReceiveEndtime").jeDate(endThree);

    /**
     *自定义validate验证：有效期
     **/
    $(function () {
        $.validator.addMethod("formradio", function(value, element) {//验证规则
                var tss =$('input:radio[name="fixed"]:checked').val();
                if (tss == 0 && $("#fixedstarttime").val()!='' && $("#fixedendtime").val()!='' ){
                    return true;
                }else if(tss == 1 && $("#activeLife").val() != ""){
                    return true;
                }
                return false;
            }
        )
    });

    /**
     *自定义validate验证：可兑换
     **/

    $(function () {
        $.validator.addMethod("formconvertible", function(value, element) {//验证规则
            debugger;
                var src = $("input:checkbox[name='convertible']:checked").next().text();
                if ($("input[name='convertible']").is(':checked') == true){
                    if (src != '' && $("#exchangestarttime").val()!='' && $("#exchangeendtime").val()!='' ){
                        return true;
                    }
                }else {
                    return true;
                }
                return false;
            }
        )
    });

    /**
     *自定义validate验证：可领取
     **/

    $(function () {
        $.validator.addMethod("formReceive", function(value, element) {//验证规则
                var Receive = $("input:checkbox[name='Receive']:checked").next().text();
                if ($("input[name='Receive']").is(':checked') == true)
                {
                    if (Receive != ''&& $("#Receivestrttime").val()!='' && $("#ReceiveEndtime").val()!='' )
                    {
                        return true;
                    }
                    return false;
                }else {
                    return true;
                }
                return false;
            }
        )
    });

    /*当前表单调用validate方法，实现表单验证功能*/
    $("#couponform").validate({
        debug: true, /*调试模式，验证通过也不跳转到目标页面*/
        rules: {
            /*配置验证规则*/
            platform: {
                required: true/*必填。如果验证方法不需要参数，则配置为true*/
            },
            platform: {
                required: true
            },
            couponname: {
                required: true
            },
            fixed: {
                required: true,
                formradio:$(".validity").val()
            },
            couponDescribe: {
                required: true
            },
            couponDenomination: {
                required: true
            },
            convertible: {
                formconvertible:$(".convertible").val()
            },
            Receive: {
                formReceive:$(".Receive").val()
            }

        },
        messages: {
            platform: {
                required: "推广平台不能为空，必选一项!"
            },
            couponname: {
                required: "优惠劵名称不能为空"
            },
            fixed: {
                formradio: "有效期格式有误"
            },
            couponDescribe: {
                required: "优惠劵描述不能为空"
            },
            couponDenomination: {
                required: "优惠劵面额不能为空"
            },
            convertible: {
                formconvertible:"可兑换时间格式有误"
            },
            Receive: {
                formReceive:"可领取时间格式有误"
            }
        },
        /* 重写错误显示消息方法,以吐司方式弹出错误消息 */
        /*获取所有必填项消息*/
        showErrors: function (errorMap, errorList) {
            var msg = "";
            $.each(errorList, function (i, v) {
                if (i == 0)//每次只弹出一个提示
                {
                    msg += (v.message + "\r\n");
                }
            });
            if (msg != "") {
                $("#errormsg").html(msg).fadeIn(300).delay(2000).fadeOut(300);
            }
        },
        /* 失去焦点时不验证 */
        onfocusout: false,
        submitHandler: function (form) {
            /*验证成功后调用方法*/
        }
    });



    /**
     * 最小订单金额限制
     * @param obj
     */
    function moneyinput(obj) {
        obj.value = obj.value.trim().replace(/[^0-9|\.]/g, '');
        obj.value = obj.value.replace(/^\./, '0.');
        obj.value = obj.value.replace(/\.$/, '');
        if (obj.value.indexOf('.') > 0 && obj.value.indexOf('.') != (obj.value.length - 1)) {
            obj.value = obj.value.substring(0, obj.value.indexOf('.') + 1)
                + obj.value.substr(obj.value.indexOf('.') + 1, 2);
        }
        ;
        this.value = obj.value.replace(/\./g, '_').replace('_', '.').replace(/_/g, '');
    }

    /**
     * 优惠劵面额下拉框选中自定义选项触发事件
     */
    //        $("#myse").change(function () {
    //            if($(this).val()=="自定义"){
    //                $(".coupDeno").show();
    //            }else {
    //                $(".coupDeno").hide();
    //            }
    //        })

    /**
     * 可兑换勾选之后触发事件
     */
    $("#convertible").click(function(){
        if ($("#convertible").prop("checked")==true){
            $("#exchangestarttime").removeAttr("disabled");
            $("#exchangeendtime").removeAttr("disabled");
        }else {
            $("#exchangestarttime").attr("disabled","disabled");
            $("#exchangeendtime").attr("disabled","disabled");
        }
    })

    /**
     * 可领取勾选之后触发的事件
     */
    $("#Receive").click(function(){
        if ($("#Receive").prop("checked")==true){
            $("#Receivestrttime").removeAttr("disabled");
            $("#ReceiveEndtime").removeAttr("disabled");
            $("#collar").removeAttr("disabled");
        }else {
            $("#Receivestrttime").attr("disabled","disabled");
            $("#ReceiveEndtime").attr("disabled","disabled");
            $("#collar").attr("disabled","disabled");
        }
    })
</script>
